@import 'app.less';

.product-list {
    background: @bg-color;

    .banner {
        image {
            width: 100%;
            height: 350rpx;
        }
    }
    .tabs {
        background: #fff;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-around;
        padding:  20rpx 0;

        image {
            width: 40rpx;
            height: 40rpx;
            margin-bottom: 10rpx;
        }
        view {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
    }
    .products {
        padding-bottom: 100rpx;

        li {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 90%;
            margin: 20rpx 5%;
            background-size: cover;
        }
        .tit {
            background: rgba(0, 0, 0, .5);
            display: flex;
            flex-direction: column;
            width: 100%;
            align-items: center;
            padding: 40rpx 0;

            text {
                color: #fff;
                font-size: 36rpx;
                padding-top: 10rpx;
            }
        }
        .con {
            background: rgba(0, 0, 0, .7);
            width: 100%;
            display: flex;
            padding: 20rpx 0;

            text {
                width: 50%;
                flex: 1;
                align-items: center;
                justify-content: center;
                color: #fff;
                text-align: center;
            }
        }
    }
}